@import "./normalize.css";

@theme-color: orange;

html {
  font-size: 2.66667vw;
  font-family: Arial, Helvetica, sans-serif;
  padding: 0;
}
body {
  min-width: 320px;
  max-width: 750px;
  border: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
  font-size: 1.5rem;
}

//一像素下边框
.bottom-border-1px(@color) {
  position: relative;
  border-bottom: 0;
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: @color;
    //如果是物理像素:css像素 = 2:1 的屏幕
    transform: scaleY(0.5);
    ////如果是物理像素:css像素 = 3:1 的屏幕
    @media screen and (-webkit-device-pixel-ratio: 3) {
      transform: scaleY(0.333);
    }
  }
}

//一像素上边框
.top-border-1px(@color) {
  position: relative;
  border-top: 0;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: @color;
    transform: scaleY(0.5);
    @media screen and (-webkit-device-pixel-ratio: 3) {
      transform: scaleY(0.333);
    }
  }
}

//清除浮动
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

//根据像素比来使用 2x图 3x图
.bg-img(@url) {
  // background-image: url("@{url}@2x.png");
  background-image: ~"url('@{url}@2x.png')";
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    // background-image: url("@{url}@3x.png");
    background-image: ~"url('@{url}@3x.png')";
  }
}

//文字超过容器宽度自动使用省略号
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
